<template>
  <div class="box">
    <el-row :gutter="30">
      <el-col :span="8" v-for="item in list" :key="item.index">
        <el-card
          shadow="always"
          class="box_card"
          @click.native="routerTo(item.router)"
        >
          <svg
            class="icon iconA"
            aria-hidden="true"
            v-if="item.icon.indexOf('#') != -1"
          >
            　　
            <use class="whites" :xlink:href="item.icon"></use>
          </svg>
          <div
            :class="
              'icon iconB iconfont' + ' ' + item.icon.slice(1, item.icon.length)
            "
          ></div>
          <!-- <span class="iconfont icon-a-bianzu22 icon iconB"></span> -->
          <i></i>
          <li>{{ item.name }}</li>
          <p class="psddsa">{{ item.gz }}</p>
          <!-- <span></span> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "#icon-a-bianzu22",
          name: "特种作业人员培训学习系统",
          gz: "（应急管理局（原安监局））",
          router: "/introduce/tzzy",
        },
        {
          icon: "#icon-a-bianzu7",
          name: "高危行业管理人员培训系统",
          gz: "（应急管理局（原安监局））",
          router: "/introduce/tzzy",
        },
        {
          icon: "#icon-tezhongshebei",
          name: "特种设备作业人员培训系统",
          gz: "（市场监管局(原质监局)）",
          router: "/introduce/tzsb",
        },

        {
          icon: "#icon-baoguo",
          name: "一般工贸行业管理人员培训系统",
          gz: "（应急管理局（原安监局））",
          router: "/introduce/ybgm",
        },
        {
          icon: "#icon-yiyuanjiuzhen",
          name: "职业卫生安全管理培训系统",
          gz: "（卫健委）",
          router: "/introduce/zyws",
        },
        {
          icon: "#icon-yuzhijineng",
          name: "职业技能等级认定培训系统",
          gz: "（人社局）",
          router: "/introduce/zyjn",
        },
        {
          icon: "#icon-yuanqu",
          name: "建筑类从业人员培训系统",
          gz: "（建设厅）",
          router: "/introduce/jzl",
        },
        {
          icon: "#icon-tz-jiaotongyunshu",
          name: "交通运输行业在线培训系统",
          gz: "（运管局）",
          router: "/introduce/jtys",
        },
        {
          icon: "#icon-a-bianzu11",
          name: "企业安全生产培训学习系统",
          gz: "（生产经营类企业/园区）",
          router: "/introduce/qyaq",
        },

        {
          icon: "#icon-a-bianzu63",
          name: "企业三级安全教育专项培训系统",
          gz: "（生产经营类企业/园区）",
          router: "/introduce/qyaq2",
        },
        {
          icon: "#icon-a-bianzu64",
          name: "企业安全生产双体系建设管理系统",
          gz: "（生产经营类企业/园区）",
          router: "/introduce/qyaq3",
        },
        {
          icon: "#icon-a-bianzu62",
          name: "企业工伤预防能力提升专项培训系统 ",
          gz: "（生产经营类企业/园区）",
          router: "/introduce/qyaq4",
        },
      ],
    };
  },
  methods: {
    routerTo(e) {
      // 点击卡片跳转router
      if (e == "/") {
      } else {
        this.$router.push(e);
      }
    },
  },
};
</script>
<style scoped>
/* @import "//at.alicdn.com/t/font_3159452_icujh5507ad.css"; */
</style>
<style lang="scss" scoped>
::v-deep {
  .el-row {
    box-sizing: content-box;
    .el-col-8 {
      box-sizing: content-box !important;
      overflow: hidden;
      // margin-bottom: 24px;
      padding-top: 12px;
      width: 420px;
      .el-card {
        width: 416px;
        height: 185px;
        border-radius: 8px;
        border: none;

        li {
          list-style: none;
        }
        .el-card__body {
          width: auto;
          padding-left: 40px;
        }
      }
      .is-always-shadow {
        box-shadow: 0px 4px 18px 0px rgba(234, 238, 253, 0.65);
        width: 400px;
        margin-bottom: 12px;
        margin-left: 10px;
      }

      // height: 185px;
    }
  }
}

.box {
  cursor: pointer;
  width: 1320px;

  display: flex;
  margin: 0 auto;
  flex-direction: column;
  .box_card {
    // text-align: center;
    // margin-top: 24px;
    .box_i {
      margin-top: 30px;
    }
    li {
      // line-height: 40px;
      margin-top: 20px;
      font-size: 16px;
      font-weight: 400;
    }
    p {
      font-size: 14px;
      color: #999999;
    }
    span {
      width: 130px;
      height: 1px;
      display: block;
      margin-left: 55px;
      border-bottom: 1px solid #327bff;
    }
    .iconB {
      display: none;
    }
    .iconA {
      display: inline-block;
    }
  }
  .box_card:hover {
    background: #0052d9;
    color: #fff;
    .psddsa {
      color: #fff;
    }
    // span {
    //   width: 130px;
    //   // height: 1px;
    //   display: block;
    //   margin-left: 55px;
    //   border-bottom: 1px solid #ffffff;
    // }
    // .whites {
    //   color: black !important;
    // }
    .iconA {
      display: none;
    }
    .iconB {
      display: inline-block;
      font-size: 35px;
      // font-weight: 400;
      width: 35px !important;
      // margin-top: 40px;
    }
    .icon-tz-jiaotongyunshu {
      font-size: 28px;
      margin-top: 18px;
      margin-bottom: 2px;
    }
    .icon-yuzhijineng {
      font-size: 31px;
      margin-top: 16.2px;
      margin-bottom: 4px;
    }
    li {
      margin-top: 24px;
    }
  }

  i {
    font-size: 40px; /* 控制图标的大小 */
    margin-top: 20px;
  }
  .icon {
    width: 35px !important;
    height: 35px !important;
    margin-top: 14px;
    color: #fff;
  }
}
</style>